<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta name="layout" content="template" />
<script type="text/javascript" src="${resource(dir: 'js/', file: 'jquery.blockUI.js')}"></script>
<title>Update Profile</title>
<style type="text/css">
#loadSprinner {
	margin: 70px 250px;
	position: absolute;
}

#loadSpinnerImage {
	position: absolute;
	top: 80px;
	left: 95px;
	z-index: 5
}

</style>
</head>
<body>
	<div class="container">
		<div id="showBlock" class="panel offset2" style="width: 800px">

			
			<form class="form-horizontal" name="memberForm" method="post">
				<div class="media" style="position:relative">
					<div id="loadSpinnerImage"></div>
					<div class="pull-left media-action">
						<div id="vbn"></div>
						<g:if test="${member?.avatar}">
							<div id="upload-container">
								<img style="width: 180px; height: 180px;"
									class="media-object img-polaroid"
									src="${resource(dir : 'avatarImages/', file : member?.avatar, absolute : 'true') }">
							</div>
						</g:if>

						<g:else>
							<div id="upload-container">
								<img style="width: 180px; height: 180px;"
									class="media-object img-polaroid"
									src="${resource(dir : 'avatarImages/', file : 'user.png', absolute : 'true') }">
							</div>
						</g:else>
						
						
						<p>
							<input style="margin-top: 6px" type="button" value="Choose files to upload"
								id="choosesImage" class="btn btn-block btn-info">
						</p>
						<p id="errorExtension"></p>
						<div id="listOption" style="margin-top: 50px">

						</div>	
						
					</div>

					<div class="media-body offset2">
					
						<h2 class="media-heading">Update Member</h2>
						<hr />
						<input type="hidden" id="id" value="${member?.id}"> <input type="hidden" id="username" value="${member?.username}">
						<div class="control-group">
							<label class="control-label" for="inputFirstName">First Name: </label>
							<div class="controls">
								<input type="text" id="firstName" placeholder="First Name" value="${member?.firstName}">
							</div>
						</div>

						<div class="control-group">
							<label class="control-label" for="inputLastName">Last Name: </label>
							<div class="controls">
								<input type="text" id="lastName" placeholder="Last Name" value="${member?.lastName}">
							</div>
						</div>
						<div id="loadSprinner"></div>
						
						<div class="control-group">
							<label class="control-label" for="inputPassword">Enter new password: </label>
							<div class="controls" style="position: relative">
								<input type="password" placeholder="Password" disabled>
									<a href="#" id="linkPassword" style="position: absolute; left:120px; top: 10px">Edit password</a>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="inputGender">Gender: </label>
							<div class="controls">
								<select id="gender">
									<g:if test="${member?.gender.equals('male')}">
										<option value="choose">Choose Gender</option>
										<option value="male" selected="selected">Male</option>
										<option value="female">Female</option>
									</g:if>
									<g:elseif test="${member?.gender.equals('female')}">
										<option value="choose">Choose Gender</option>
										<option value="male">Male</option>
										<option value="female" selected="selected">Female</option>
									</g:elseif>
									<g:else>
										<option value="choose" selected="selected">Choose
											Gender</option>
										<option value="male">Male</option>
										<option value="female">Female</option>
									</g:else>

								</select>
							</div>
						</div>

						<div class="control-group">
							<label class="control-label" for="inputSkype">Skype: </label>
							<div class="controls">
								<input type="text" id="skype" placeholder="Skype" value="${member?.skype}">
							</div>
						</div>

						<div class="control-group">
							<label class="control-label" for="inputMobile">Mobile: </label>
							<div class="controls">
								<input type="text" id="mobile" placeholder="Mobile" value="${member?.mobile}">
							</div>
						</div>
							<div id="checkMobile"></div>
						<div class="control-group">
							<label class="control-label" for="inputCompany">Company: </label>
							<div class="controls">
								<input type="text" id="company" placeholder="Company" value="${member?.company}"><br /> <br />
								<button id="btnMember" class="btn btn-info">Update</button>
							</div>
						</div>
						<div id="updateSuccess"></div>
					</div>
				</div>
			</form>
		</div>
		
		<form method="post" action="">
			<div style="width:400px;text-align: left" id="change_password_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h3>Change Password</h3>
				</div>
				<div class="modal-body">
					<div class="control-group">
							<label class="control-label" for="inputNewPassword">Enter new password: </label>
							<div class="controls">
								<input type="password" id="newPassword" class="span4">
							</div>
					</div>
					<div id="checkPassword"></div>
					<div class="control-group">
							<label class="control-label" for="confirmNewPassword">Confirm new password: </label>
							<div class="controls">
								<input type="password" id="confirmNewPassword" class="span4">
							</div>
					</div>
					<div id="checkMatch"></div>
						<div class="control-group" id="controlHs">
							<label class="control-label" for="enterCurrentPassword">Enter current password: </label>
							<div class="controls">
								<input type="password" id="enterCurrentPassword" class="span4">
							</div>
						</div>
					<div id="checkPasswordOld"></div>
					
					<div id="alertUpdateSuccess"></div>
					
				</div>
				<div class="modal-footer">
					<input type="submit" id="submitChangePass" class="btn btn-primary" value="Save"/>
					<input id="hideModalPass" type="reset" value="Cancel" class="btn btn-default" />
				</div>
			</div>

		</form>

	</div>
	<script type="text/javascript">
	$(document).ready(function(){
		var checkOption = function(){
			$.ajax({
				url: '${g.createLink(controller:'member', action: 'checkOption')}',
				dataType: 'json',
				contentType: "application/json",
				
				success: function(data){
					var htmlPrepare = '';
					if(data.memberOption.isActive ==  true){
						htmlPrepare += '<p style="color:red; text-align:left;position: relative">Confirm email address <img style="position:absolute; width:20px; height: 20px; left: 170px" src="${resource(dir : "images/", file: "tick_16.png", absolute : true)}"/></p>';
					}
					else {
						htmlPrepare += '<p style="text-align:left">Confirm email address</p>';
					}

					if(data.pw == true){
						htmlPrepare += '<p style="color:red; text-align:left;position:relative">Set a password <img style="position:absolute; width:20px; height: 20px; left: 170px" src="${resource(dir : "images/", file: "tick_16.png", absolute : true)}"/></p>';
					}
					else{
						htmlPrepare += '<p style="text-align:left">Set a password</p>';
					}
					
				$('#listOption').html(htmlPrepare);
				}
			});	
		};
		$('#linkPassword').click(function(){
			$('#checkPassword').empty();
			$('#checkPasswordOld').empty();
			$('#checkMatch').empty();
			shCurrentPass();
			$('#change_password_modal').modal("show");
		});
		
		$('#hideModalPass').click(function(){
			$('#change_password_modal').modal("hide");
		});
		
		var shCurrentPass = function(){
			$.ajax({
				url: '${g.createLink(controller:'member', action: 'checkPasswordUpdate')}',
				dataType: 'json',
				data: null,
				success: function(data){
					if(data.booleanPasswordNull == false){
						$('#controlHs').hide();
					}
				}
			});
		};
		$('#submitChangePass').click(function(){
			var id = $('#id').val();
			var newPassword = $('#newPassword').val();
			var confirmNewPassword = $('#confirmNewPassword').val();
			var enterCurrentPassword = $('#enterCurrentPassword').val();
			checkPasswordExist(id, newPassword, confirmNewPassword, enterCurrentPassword);
			return false;
		});
		var checkPasswordExist = function(id, newPassword, confirmNewPassword, enterCurrentPassword){
			var regName = /^.{6,15}$/;
			$.ajax({
				url: '${g.createLink(controller:'member', action: 'checkPasswordExist')}',
				dataType: 'json',
				contentType: 'application/json',
				data: {
					id: id,
					password: enterCurrentPassword
				},
				success: function(data){
					$('#checkPassword').empty();
					$('#checkPasswordOld').empty();
					$('#checkMatch').empty();
					if(regName.test(newPassword) == false){
						var html = "<div class='alert alert-error'>Password must be at least 6 characters</div>";
						$('#checkPassword').html(html);
					}
					
					else if(data.booleanPassword == false){
						var html = "<div class='alert alert-error'>Password is not valid</div>";
						$('#checkPasswordOld').html(html);
					}
					else if(confirmNewPassword != newPassword){
						var html = "<div class='alert alert-error'>Password do not match</div>";
						$('#checkMatch').html(html);
					}
					else {
						changePassword(id, newPassword);
						checkOption();
						var updatestr = "<div class='alert alert-success'>Update Successful</div>";
						$('#alertUpdateSuccess').html(updatestr);
						$('#alertUpdateSuccess').fadeIn(900);
						$('#alertUpdateSuccess').fadeOut(900);
						setTimeout(function(){
							location.reload(true)},1000);

						
					}
					
				}
			});
		};
		
		var changePassword = function(id, newPassword){
			$.ajax({
				url: '${g.createLink(controller:'member', action: 'changePassword')}',
				dataType: 'json',
				contentType: 'application/json',
				async: false,
				data: {
					id: id,
					password: newPassword
				}
			});
			
		};

		
		
		checkOption();
		$("#btnMember").click(function(){
			$('#checkMobile').empty();
			var id = $('#id').val();
			var username = $('#username').val();
			var avatar = $('#avatar').val();
			var firstName = $('#firstName').val();
			var lastName = $('#lastName').val();
			var skype = $('#skype').val();
			var mobile = $('#mobile').val();
			var gender = $('#gender').val();
			var company = $('#company').val();
			var regex_pattern_mobile = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4,5})$/;
			if(regex_pattern_mobile.test(mobile) == false){
				var html = "<div class='alert alert-error'>Phone number is not valid</div>";
				$('#checkMobile').html(html);
			}
			else{
			$.ajax({
				url : '${g.createLink(controller: 'member', action: 'updateMember')}',
				dataType: 'json',
				contentType: "application/json",
				data: { 
					id: id,
					username: username,
					firstName: firstName,
					lastName: lastName,
					skype: skype,
					mobile: mobile,
					gender: gender,
					company: company,
				},
				beforeSend: function(){
					$('div#showBlock').block({
						message:'Please wait...',
					});
					var htmlPrepare = '<img src="${resource(dir : "images/", file: "bigLoader.gif", absolute : true)}"/>'			
					$("#loadSprinner").fadeIn(900,0);
					$("#loadSprinner").html(htmlPrepare);
				},
				success: function(data){
					$('div#showBlock').unblock();
					$("#loadSprinner").fadeOut(2000);
					$('#id').val(data.member.id);
					$('#username').val(data.member.username);
					$('#firstName').val(data.member.firstName);
					$('#lastName').val(data.member.lastName);
					$('#skype').val(data.member.skype);
					$('#mobile').val(data.member.mobile);
					$('#gender').val(data.member.gender);
					$('#company').val(data.member.company);

					var updatestr = "<div class='alert alert-success'>Update Successful</div>";
					$('#updateSuccess').html(updatestr);
					$('#updateSuccess').fadeIn(900);
					$('#updateSuccess').fadeOut(3000);
					
				},
				
				
			});

			
			}
			return false;
		});
		
		var uploader = new plupload.Uploader({
			runtimes : 'gears,html5,flash,silverlight,browserplus',
			browse_button : 'choosesImage',
			url : '${createLink(controller: 'member', action : 'upload')}',
			max_file_size : '10mb',
			flash_swf_url : '${resource(dir : '/libs/plupload', file : 'plupload.flash.swf')}',
			silverlight_xap_url : '${resource(dir : '/libs/plupload', file : 'plupload.silverlight.xap')}',
			filters : [{
				title : "Image Files", extensions : "jpg,gif,png",
			}],
			resize : {width : 320, height : 240, quality : 90},
			file_data_name : 'avatar',
			multipart_params: {id: $('#id').val()}
		});

		uploader.init();

		var fileList = new Array();
		uploader.bind('FilesAdded',function(up,files){
			uploader.start();
			for(var i in files){
				fileList.push(files[i].name);
			}
		});

		uploader.bind('Error', function(up, error) {
			var htmlPre = error.message;
			$('#errorExtension').html("<i class='alert alert-error'>"+htmlPre+"</i>");
		});
		
		uploader.bind('UploadComplete',function(up,files){
			var fileLength = fileList.length;
			var pathImg = '<img style= "width: 180px; height: 180px;" class="media-object img-polaroid" src="${resource(dir : 'avatarImages/', absolute : true)}'+fileList[fileLength-1]+'"/>'
			$('#upload-container').html(pathImg);
			var htmlPrepareImage = '<img src="${resource(dir : "images/", file: "spinner.gif", absolute : true)}"/>'
				$("#loadSpinnerImage").fadeIn(900,0);
				$("#loadSpinnerImage").html(htmlPrepareImage);
				$("#loadSpinnerImage").fadeOut(900);
		});

		
	
	});
 </script>
</body>
</html>